<template>
    <div class="leave-box">
      <el-form :model="formData" label-width="100px" class="leave-form">
        
        <!-- 请假类型 -->
        <el-form-item label="请假类型">
          <el-radio-group v-model="formData.leave_type" size="large">
            <el-radio-button value="事假">事假</el-radio-button>
            <el-radio-button value="病假">病假</el-radio-button>
            <el-radio-button value="公假">公假</el-radio-button>
          </el-radio-group>
        </el-form-item>
        
        <!-- 请假时间 -->
        <el-form-item label="请假时间" class="date-picker-item">
          <el-date-picker
            v-model="formData.date1"
            type="datetime"
            placeholder="开始时间"
            class="date-picker"
            :picker-options="pickerOptions"
          />
          <p style="margin: 0 10px">-</p>
          <el-date-picker
            v-model="formData.date2"
            type="datetime"
            placeholder="结束时间"
            class="date-picker"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        
        <!-- 请假原因 -->
        <el-form-item label="请假原因">
          <el-input
            v-model="formData.reason"
            maxlength="100"
            style="height: 200px;"
            placeholder="请输入请假原因"
            autosize
          />
        </el-form-item>
        
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="validateAndSubmit" class="submit">提交</el-button>
        </el-form-item>
        
      </el-form>
    </div>
</template>
  
  
<script setup>
    import { ref } from 'vue';
    import createLeave from "@/modules/leave/create-leave";
    import { ElMessage } from 'element-plus';

    const formData = ref({
        id: localStorage.getItem('id'),
        leave_type: '',
        date1: '',
        date2: '',
        reason: '',
    });

    const pickerOptions = {
        shortcuts: [{
        text: '明天',
        onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
            picker.$emit('pick', date);
        }
        }]
    };

    const validateForm = () => {
        console.log(formData.value);
        if (!formData.value.leave_type || !formData.value.date1 || !formData.value.date2 || !formData.value.reason) {
            alert('请填写完整的请假信息');
            return false;
        }
        return true;
    };

    const create_Leave = async () => {
        let res = await createLeave(formData.value);
        console.log('res', res);
        console.log('Submitting leave:', formData);
        ElMessage({
            message: "提交成功",
            type: "success",
        });
    };

    const validateAndSubmit = () => {
        if (validateForm()) {
            create_Leave();
        }
    };
</script>

  
<style lang="scss">
    .leave-box {
        margin-top: 20px;
    }

    .leave-form {
        max-width: 600px;
    }

    .date-picker-item {
        display: flex;
        justify-content: space-between;
    }

    .date-picker {
        width: 100%;
    }
    .el-textarea__inner{
        height: 190px;
    }
    .el-form-item__content .el-input__wrapper{
        align-items: flex-start !important;
    }
    .reason-input .el-input__inner {
        padding-top: 0; /* Remove default padding */
    }

    .submit{
        width: 100%;
    }


</style>
  